<template>
  <div class="searchUSer">
    <el-row class="searchinput">
      <el-input
        placeholder="请输入用户名"
        v-model="input"
        prefix-icon="el-icon-search"
        @change="changeHandle"
      >
      </el-input>
    </el-row>
    <!-- animate__flipInY -->

    <!-- <div class="animate__animated animate__flipInY"> -->
      <el-table :data="tableData" style="width: 100%">
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-form
              label-position="left"
              inline
              class="demo-table-expand"
              id="details"
            >
              <el-form-item label="用户头像">
                <img :src="props.row.userHeader" alt="" id="userHeader" />
              </el-form-item>
              <el-form-item label="用户 ID">
                <span>{{ props.row.userId }}</span>
              </el-form-item>
              <el-form-item label="用户名">
                <span>{{ props.row.userName }}</span>
              </el-form-item>

              <el-form-item label="好物 ID">
                <span>{{ props.row.shareId }}</span>
              </el-form-item>
              <el-form-item label="好物标题">
                <span>{{ props.row.shareHeader }}</span>
              </el-form-item>
              <el-form-item label="好物内容">
                <span>{{ props.row.shareContent }}</span>
              </el-form-item>
              <el-form-item label="点赞数">
                <span>{{ props.row.likes }}</span>
              </el-form-item>
              <el-form-item label="收藏数">
                <span>{{ props.row.collect }}</span>
              </el-form-item>
              <el-form-item label="最新发布时间">
                <span>{{ props.row.shareDate }}</span>
              </el-form-item>
            </el-form>
          </template>
        </el-table-column>
        <el-table-column label="用户 ID" prop="userId"> </el-table-column>
        <el-table-column label="用户名" prop="userName"> </el-table-column>
        <el-table-column label="最新发布时间" prop="shareDate">
        </el-table-column>
      </el-table>
    <!-- </div> -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      input: "",
      tableData: [
        // {
        //   userId: "1",
        //   userName: "xiaoming",
        //   userHeader:
        //     "https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3528124961,3599494671&fm=111&gp=0.jpg",
        //   shareId: "22",
        //   shareHeader: "查询用户第一条测试用例",
        //   shareContent: "查询用户测试分享内容",
        //   likes: "55",
        //   collect: "23",
        //   shareDate: "2020.10.28",
        // },
      ],
      searchinfos: {},
    };
  },
  methods: {
    changeHandle() {
      // alert(333)
      this.$axios
        .get("/api/appusers/search", {
          params: { userName: this.input },
        })
        .then((res) => {
          console.log(11);
          // console.log(res.data)
          if (res.data.code == 0) {
            console.log(111333);
            var info = res.data.shareinfos;
            var item = res.data.userinfos;
            if (!info) {
              this.searchinfos = {
                userId: item.userId,
                userName: item.userName,
                userHeader: item.userHeader,
                likes: item.likes.length,
                collect: item.collect.length,
              };
            } else {
              this.searchinfos = {
                userId: item.userId,
                userName: item.userName,
                userHeader: item.userHeader,
                shareId: info.shareId,
                shareHeader: info.shareHeader,
                shareContent: info.shareContent,
                likes: item.likes.length,
                collect: item.collect.length,
                shareDate: info.shareDate,
              };
            }
            console.log(this.searchinfos);
            this.tableData.push(this.searchinfos);
          } else {
            console.log(22);
            this.$message({
              message: "查不到该用户！",
              type: "err",
            });
          }
        })
        .catch(() => {});
      this.input = "";
      this.tableData = [];
    },
  },
};
</script>

<style >
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 100px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
#details .el-form-item__label {
  font-weight: bold;
}
</style>

<style  scoped>
.searchUSer .el-input__inner {
  width: 400px;
  margin: 0 10px;
}
.searchinput {
  display: flex;
  width: 400px;
  float: right;
  margin-bottom: 20px;
}
.el-form-item__content img {
  width: 50px;
  border-radius: 50%;
  border: 1px solid #eee;
}
</style>